<template>
  <div>
    <el-container>
      <!-- <el-aside width="300px">
        <el-card :style="`height:${height}px`" class="box-card">
          <div slot="header" class="clearfix">
            <span>组织机构</span>
          </div>
          <leftTree treeType="1"></leftTree>
        </el-card>
      </el-aside>-->
      <el-main>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>部门信息表</span>
          </div>
          <el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="部门名称">
              <el-input clearable v-model="formInline.user" placeholder="部门名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button type="primary" @click="addOrg(0)">新增</el-button>
            </el-form-item>
          </el-form>
          <el-table
            :data="tableData"
            style="width: 100%"
            row-key="id"
            border
            lazy
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column prop="name" label="科室名称" width="280"></el-table-column>
            <el-table-column prop="kszg1name" label="科室主管" width="280"></el-table-column>
            <el-table-column prop="kszg2name" label="科室第二主管" width="280"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <template v-if="scope.row.pid != '1054'">
                  <el-button size="mini" @click="addOrg(1,scope.row)">编辑</el-button>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-main>
    </el-container>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="部门名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="上级部门">
          <select-tree
            @treeNode="treeNode"
            v-model="form.parentid"
            :options="options"
            :props="defaultProps"
          />
        </el-form-item>
        <el-form-item label="科室主管">
          <el-select v-model="form.kszg1name" value-key="id" filterable placeholder="请选择">
            <el-option v-for="item in kszgList" :key="item.id" :label="item.username" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科室第二主管">
          <el-select v-model="form.kszg2name" value-key="id" filterable placeholder="请选择">
            <el-option v-for="item in kszgList" :key="item.id" :label="item.username" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科室位置">
          <el-input v-model="form.kswz"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="number" v-model="form.sort"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const leftTree = () => import("@/components/leftTree");
const SelectTree = () => import("@/components/SelectTree");
export default {
  data() {
    return {
      height: window.innerHeight - 140,
      heightTab: window.innerHeight - 310,
      formInline: {
        user: "",
        region: "",
      },
      tableData: [],
      dialogVisible: false,
      form: {
        name: "",
        parentid: "",
        kszg1name: "",
        kszg2name: "",
        sort: 0,
        kswz: "",
      },
      defaultProps: {
        parent: "parentId", // 父级唯一标识
        value: "id", // 唯一标识
        label: "name", // 标签显示
        children: "children", // 子级
      },
      // 数据列表
      options: [
        {
          parentId: "0",
          id: "A",
          label: "label-A",
          children: [
            {
              parentId: "A",
              id: "A-1",
              label: "label-A-1",
            },
          ],
        },
        {
          parentId: "1",
          value: "B",
          label: "label-B",
          children: [],
        },
      ],
      tableDataAll: [],
      title: "新增部门",
      kszgList: [],
      saveType: 0,
      clickId:0
    };
  },
  components: {
    leftTree: leftTree,
    "select-tree": SelectTree,
  },
  methods: {
    treeNode(data) {
      this.form["parentid"] = data.id;
      console.log(data);
    },
    getOrgList() {
      this.$ajax.get("/admin/getOrg").then((res) => {
        this.tableData = res.data;
        this.options = res.data;
        this.tableDataAll = res.data;
      });
    },
    addOrg(i, row) {
      this.clickId = row.id
      console.log(row);
      if (i == 0) {
        this.saveType = 0;
        this.title = "新增部门";
        Object.keys(this.form).forEach((item) => {
          this.form[item] = "";
        });
        this.dialogVisible = true;
      } else {
        this.saveType = 1;
        Object.keys(row).forEach((item) => {
          this.form[item] = row[item];
        });
        this.title = "编辑部门";
        this.dialogVisible = true;
      }
    },
    //获取科室主管
    getkszgList() {
      this.$ajax.get("/admin/getuserbydeptid").then((res) => {
        console.log(res.data);
        this.kszgList = res.data;
      });
    },
    save() {
        let data = {
          parentid: this.form["parentid"],
          name: this.form.name,
          kszg1: this.form["kszg1name"].id,
          kszg2: this.form["kszg2name"].id,
          kszg1name: this.form["kszg1name"].username,
          kszg2name: this.form["kszg2name"].username,
          sort: this.form["sort"],
          kswz: this.form["kswz"],
          createuserid: this.$cookies.get("userInfo").id,
        };
      if (this.saveType == 0) {
        this.$ajax.post("/admin/addOrg", data).then((res) => {
          if (res.code == 0) {
            this.dialogVisible = false
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.getOrgList();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      } else {
        data['id'] = this.clickId
        this.$ajax.post("/admin/updateOrg", data).then((res) => {
          if (res.code == 0) {
            this.dialogVisible = false
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.getOrgList();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      }
    },
  },
  mounted() {
    this.getOrgList();
    this.getkszgList();
  },
};
</script>
<style lang="less" scoped>
.block {
  padding: 10px 0;
}
/deep/ .el-card__body {
  padding-bottom: 0;
}
</style>